<!--
 作者：ex_wangshuai
 日期：2016-11-02
 功能：首页-店铺
 参数：
 事件：
-->
<template>
  <div class="store">
    <div class="loading-box">
      <img src="../../../static/img/loading.gif" class="loading">
    </div>
    <toolbar :view-title="'明星店铺'">
      <div
        class="leftButton"
        type="button"
        @click="this.$broadcast('goBack')"
        slot="left-button">&nbsp;
      </div>
      <div class="rightButton"
           type="button"
           slot='right-button'>
        <div class="filterButton" @click="showFilter" v-show="!filterOpenState">
          <span class="filterIcon" :page-id="routeKey">&nbsp;</span>
          <span>筛选</span>
        </div>
        <span v-show="filterOpenState" @click="doFilter" class="filterOver">完成</span>
      </div>
    </toolbar>
    <condition-filter
      :condition-list="conditionList">
    </condition-filter>
    <time-filter
      :time-list="timeList">
    </time-filter>
    <!--<div class="sub-title">{{defaultCategory | titleFilter}}{{tableTitle}}</div>-->
    <div class="sub-title">销量TOP10店铺</div>
    <div class="category">{{category}}</div>
    <div v-if="startTime" class="time">{{startTime | formatDate}} - {{endTime | formatDate}}</div>
    <store-table :table-rows="tableData" :grid-columns="gridColumns" :thead="thead" :height="height">
    </store-table>
    <!--<div class="item-data" v-if="!tableData.length">-->
      <!--暂无数据-->
    <!--</div>-->
    <filter-view v-show="filterOpenState"
                 :default-org-id="defaultOrgId"
                 :default-category="defaultCategory"
                 :default-category-id="defaultCategoryId"
                 :default-platform="defaultPlatform"
                 :choose-platforms= "pingtai"
                 :choose-platforms-id= "pingtaiId"
                 :page-id="'storeMonitor'"
                 :tab-id="tabIds">
    </filter-view>
    <loading :show="showLoading"></loading>
    <confirm :show.sync="timeoutStatus"
             title="加载失败,您可以"
             cancel-text="返回首页"
             confirm-text="重新加载"
             @on-cancel="this.$route.router.go('/home')"
             @on-confirm="reload">
    </confirm>
    <confirm :show.sync="show" title="是否退出？" cancel-text="取消" confirm-text="确定" @on-confirm="onAction('确认')"></confirm>
  </div>
</template>

<script>
  import Toolbar from '../common/Toolbar.vue'
  import ConditionFilter from '../common/ConditionFilter.vue'
  import TimeFilter from '../common/TimeFilter.vue'
  import StoreTable from './StoreTable.vue'
  import FilterView from '../common/FilterView.vue'
  import Loading from 'vux/dist/components/Loading'
  import Confirm from 'vux/dist/components/Confirm'

  export default{
    components: {
      Toolbar,
      ConditionFilter,
      TimeFilter,
      StoreTable,
      FilterView,
      Loading,
      Confirm
    },
    data () {
      var data = {}
      data.pingtai = ''
      data.pingtaiId = ''
      data.show = false
      data.timeoutStatus = false
      data.startTime = ''
      data.endTime = ''
      data.showLoading = false
      data.defaultOrgId = ''
      data.defaultCategory = ''
      data.defaultCategoryId = ''
      data.category = ''
      data.defaultPlatform = ''
      data.brandId = 0
      data.brandDateId = 0
      data.filterOpenState = false
      data.viewTitle = 'TOP店铺'
      data.height = '64.5vh'
      data.tableTitle = ''
      data.tableData = []
      // data.gridColumns = ['rank', 'brand', 'shop_name', 'shop_sale', 'shop_sales_amount']
      data.gridColumns = ['rank', 'shop_name', 'shop_sale', 'shop_sales_amount']
      // data.thead = ['排名', '品牌', '店铺', '销量', '销额(万元)']
      data.thead = ['排名', '店铺', '销量', '销额(万元)']
      data.conditionList = [
        {'id': 0, 'value': 'myBrand', 'text': '本品牌排名'},
        {'id': 1, 'value': 'allBrand', 'text': '行业排名'}
      ]
      data.timeList = [
        {'id': 0, 'value': 'day', 'text': '日'},
        {'id': 1, 'value': 'week', 'text': '周'},
        {'id': 2, 'value': 'month', 'text': '月'},
        {'id': 3, 'value': 'year', 'text': '年'}
      ]
      data.tabIds = 'ubrandTopSaleStores'
      data.brandParam1 = {
        mkey: 'storeMonitor',
        datePeriod: 'month',
//        refresh: true,
        brand: '',
        brand_id: '',
        tabId: 'ubrandTopSaleStores',
        category_id: '',
        category: '',
        platform: '',
        platform_id: ''
      }
      data.brandParam2 = {
        mkey: 'storeMonitor',
        datePeriod: 'month',
//        refresh: true,
        brand: '',
        brand_id: '',
        tabId: 'cateTopSaleStores',
        category_id: '',
        category: '',
        platform: '',
        platform_id: ''
      }
      return data
    },
    events: {
      'changeCondition': function (id) {
        this.showLoading = true
        this.brandId = id
        if (this.brandId === 0) {
          this.tabIds = 'ubrandTopSaleStores'
          this.getTableData(this.tableUrl, this.brandParam1)
        } else if (this.brandId === 1) {
          this.tabIds = 'cateTopSaleStores'
          this.getTableData(this.tableUrl, this.brandParam2)
        }
      },
      'changeDate': function (dateId) {
        this.showLoading = true
        this.brandDateId = dateId
        this.brandParam1.datePeriod = this.brandDateId
        this.brandParam2.datePeriod = this.brandDateId
        if (this.brandId === 0) {
          this.getTableData(this.tableUrl, this.brandParam1)
        } else if (this.brandId === 1) {
          this.getTableData(this.tableUrl, this.brandParam2)
        }
      },
//      接收filter组件回传回来的值，然后再根据值重新请求页面数据
      'filterConditions': function (filterConditions) {
        this.showLoading = true
        this.defaultPlatform = filterConditions.platform || ''
        this.brandParam1.brand = filterConditions.brand
        this.brandParam1.brand_id = filterConditions.brand_id
        this.brandParam1.category = filterConditions.category
        this.brandParam1.category_id = filterConditions.category_id
        this.brandParam1.platform = filterConditions.platform
        this.brandParam1.platform_id = filterConditions.platform_id
        this.brandParam2.brand = filterConditions.brand
        this.brandParam2.brand_id = filterConditions.brand_id
        this.brandParam2.category = filterConditions.category
        this.brandParam2.category_id = filterConditions.category_id
        this.brandParam2.platform = filterConditions.platform
        this.brandParam2.platform_id = filterConditions.platform_id
        if (this.brandId === 0) {
          this.getTableData(this.tableUrl, this.brandParam1)
        } else if (this.brandId === 1) {
          this.getTableData(this.tableUrl, this.brandParam2)
        }
      }
    },
    methods: {
      reload: function () {
        window.location.reload()
      },
      goBack: function () {
//        window.history.back()
        this.show = true
      },
      onAction: function (value) {
        if (value === '确认') {
          window.cordova.exec(function (success) {
          }, function (error) {
            window.alert('Error: ' + error)
          }, 'MideaCommon', 'exit', [])
        }
      },
      showFilter: function () {
        this.filterOpenState = true
      },
      doFilter: function () {
        this.$broadcast('doFilter')
      },
      getTableData: function (url, params) {
        this.$http.post(url, params, {_timeout: 30000}).then((res) => {
          if (res.json().error) {
            this.timeoutStatus = true
            return
          }
          this.showLoading = false
          var data = res.json()
          this.startTime = data.startTime
          this.endTime = data.endTime
          this.defaultOrgId = data.org_code || ''
          this.defaultCategory = data.category || ''
          this.defaultCategoryId = data.category_id || ''
          this.category = data.categoryCnd || data.category
          this.pingtai = data.platformCnd || data.platform
          this.pingtaiId = data.platform_id || ''
          this.$broadcast('loadDataDone')
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          this.tableData = res.json().chartDatas[0].detail
          this.viewTitle = res.json().title
          this.tableTitle = res.json().chartDatas[0].subTitle
          // this.thead = ['排名', '品牌', '店铺', '销量' + res.json().chartDatas[0].saleUnit, '销额(万元)']
          this.thead = ['排名', '店铺', '销量' + res.json().chartDatas[0].saleUnit, '销额(万元)']
        }, (res) => {
          this.showLoading = false
          this.timeoutStatus = true
        })
      }
    },
    filters: {
      titleFilter: function (value) {
        if (value.length >= 14) {
          return value === '' ? '' : value.substr(0, 14) + '...'
        } else {
          return value
        }
      }
    },
    created () {
      this.tableUrl = window.interface.productMonitor.brandHot
      this.getTableData(this.tableUrl, this.brandParam1)
    }
  }
</script>

<style lang="scss" scoped>
  .store {
    overflow-x: hidden;
    margin-top: 6.6vh;
    margin-bottom: 7.4vh;
  .leftButton {
    width: .5rem;
    height: 100%;
    background: url('../../../static/img/btn-back.png') no-repeat center center;
    background-size: 100%;
  }

  .sub-title{
    margin-top: 1.8vh;
    padding-left: .7rem;
    color: #333;
    font-size: 0.32rem;
    background: url('../../../static/img/store-title.png') no-repeat .3rem center / .28rem .26rem;
  }
  .time {
    font-size: .26rem;
    background: url('../../../static/img/time-time.png') no-repeat center right;
    background-position: .3rem center;
    background-size: .3rem .24rem;
    padding-left: .7rem;
    margin-top: 0.7vh;
    margin-bottom: 0.7vh;
    height: 3vh;
    line-height: 3vh;
  }

  .category {
    font-size: .26rem;
    background: url('../../../static/img/time-time.png') no-repeat center right;
    width: 100%;
    overflow: hidden;
    background-position: .3rem center;
    background-size: .3rem .24rem;
    padding-left: .7rem;
    margin-top: 0.7vh;
    margin-bottom: 0.7vh;
    height: 3vh;
    line-height: 3vh;
  }

  }
  .filterButton{
    margin-right: 0.25rem;
  }
</style>
